<template>
    <div class="page">
      <a-divider  />
      <a-descriptions title="用户信息">
        <a-descriptions-item label="用户名">{{ user.name }}</a-descriptions-item>
        <a-descriptions-item label="真实姓名">{{ user.realName ? user.realName  : '未填写'}}</a-descriptions-item>
        <a-descriptions-item label="联系电话">{{ user.phoneNumber }}</a-descriptions-item>
      </a-descriptions>
      <a-form layout="inline" :model="queryModel" v-if="searchBox" style="margin: 0 0 12px 0">
        <a-form-item label="关键字">
          <a-input v-model:value="queryModel.keyWord" placeholder="请输入关键字" allow-clear />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model:value="queryModel.status" placeholder="请选择角色状态">
            <a-select-option :value="1">禁止</a-select-option>
            <a-select-option :value="0">正常</a-select-option>
          </a-select>
        </a-form-item>
        <a-space>
          <a-button type="primary" @click="list">查询</a-button>
          <a-button @click="resetQuery">重置</a-button>
        </a-space>
      </a-form>
      <div class="functionBox">
        <a-space class="right">
          <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="list" />
          <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
        </a-space>
      </div>
      <a-table
          :columns="columns"
          @resizeColumn="handleResizeColumn"
          :rowKey="( record : Role ) => record.id"
          :row-selection="{ selectedRowKeys : roleIds , onChange: selectData }"
          :pagination="false"
          :locale="{ emptyText: '暂无数据' }"
          :data-source="tableData"
          :scroll="{ y: '300px' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status == 0" color="success">正常</a-tag>
            <a-tag v-if="record.status == 1" color="error">禁止</a-tag>
          </template>
        </template>
      </a-table>
      <div class="pagination">
        <a-pagination
            size="small"
            :disabled="total == 0"
            :total="total"
            show-size-changer
            @change="pageChange"
            show-quick-jumper />
      </div>
      <div class="functionSubmit">
        <a-button type="primary" @click="auth" :disabled="roleIds.length == 0">确认分配</a-button>
      </div>
    </div>
</template>

<script setup lang="ts">

    import {withDefaults, defineProps, ref, h, onMounted} from 'vue';
    import type { User } from "@/interface/User";
    import useRole from "@/hooks/useRole";
    import type {Role} from "@/interface/Role";
    import { ReloadOutlined, SearchOutlined } from "@ant-design/icons-vue";
    import type {TableColumnsType} from "ant-design-vue";
    import { getUserRolesApi } from "@/controller/UserApi"

    interface Props {
      user: User
    }

    onMounted(() => {
      setUserRole(params.user.id);
    });

    const {
      searchBox , list  , queryModel ,
      resetQuery  , tableData , selectData ,
      handleResizeColumn  , pageChange ,
      total , rowsData , roleIds
    } = useRole();

    function setUserRole(userId : string) {
      getUserRolesApi(userId).then( res => {
         if (res.code == 200) {
           roleIds.value = res.data;
         }
      });
    }

    const columns = ref<TableColumnsType>([
      {
        title: '角色名称',
        dataIndex: 'name',
        width: 200,
        align: 'center',
        fixed: 'left',
        resizable: true
      },
      {
        title: '角色描述',
        dataIndex: 'description',
        width: 200,
        align: 'center',
        resizable: true
      },
      {
        title: '权限标识',
        dataIndex: 'permissionCode',
        width: 200,
        align: 'center',
        resizable: true
      },
      {
        title: '排序',
        dataIndex: 'sortOrder',
        width: 60,
        align: "center",
        resizable: true
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: 60,
        fixed: 'right',
        align: "center",
        resizable: true
      }
    ]);

    let params = withDefaults(defineProps<Props>(),{});

    let emit = defineEmits(['sendUserRole']);

    function auth() {
      emit('sendUserRole',{ userId : params.user.id , roleIds : roleIds.value });
    }



</script>

<style scoped lang="scss">
    .page {
      height: 620px !important;
      .pagination {
        display: flex;
        justify-content: end;
        margin: 12px 0;
      }
      .functionSubmit {
        display: flex;
        margin: 18px 0 0 0;
        justify-content: center;
      }
      .functionBox {
        display: flex;
        justify-content: end;
        margin: 6px 0;
      }
    }
</style>
